import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_utils/flutter_utils.dart';
import 'package:flutter_widgets/flutter_widgets.dart';
import 'package:from_css_color/from_css_color.dart';
import '../../../../config/styles.dart';
import '../../../../gen/assets.gen.dart';
import '../../../../widgets/widgets.dart';

class TabChanel extends StatefulWidget {
  const TabChanel({super.key, required this.controller});
  final StreamController controller;

  @override
  State<TabChanel> createState() => _TabChanelState();
}

class _TabChanelState extends State<TabChanel> {
  var currentIndex = 0;

  void onTap(int index) {
    widget.controller.sink.add(index);
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return TransparentContain(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('信号切换', style: TextStyles.titleBigStyle),
          SizedBox(
            height: 30.ratio,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildItem(Assets.images.teacherDevice.path, '教师机', 0),
              _buildItem(Assets.images.macBook.path, '笔记本', 1),
              _buildItem(Assets.images.projector.path, '无线投屏', 2),
              _buildItem(Assets.images.backup.path, '备用', 3),
            ],
          )
        ],
      ),
    );
  }

  Widget _buildItem(String imgPath, String title, int index) {
    return InkWell(
      onTap: () => onTap(index),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            width: 160.ratio,
            height: 190.ratio,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.ratio),
              gradient: LinearGradient(
                colors: index == currentIndex
                    ? [
                        fromCssColor('#42AEE1'),
                        fromCssColor('#2D5FCA'),
                      ]
                    : [
                        fromCssColor('#92FFD4').withOpacity(0.2),
                        fromCssColor('#E3FFF4').withOpacity(0.1)
                      ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CommonImage.asset(
                  imgPath,
                  height: 60.ratio,
                ),
                SizedBox(
                  height: 15.ratio,
                ),
                Text(
                  title,
                  style: TextStyles.titleStyle.copyWith(fontSize: 24.ratio),
                )
              ],
            ),
          ),
          if (index == currentIndex)
            Positioned(
              right: 0,
              top: 0,
              child: Container(
                padding: EdgeInsets.symmetric(
                    horizontal: 10.ratio, vertical: 2.ratio),
                decoration: BoxDecoration(
                    color: fromCssColor('#FF841A'),
                    borderRadius: BorderRadius.circular(4.ratio)),
                child: Text('主屏',
                    style: TextStyles.titleStyle.copyWith(fontSize: 12.ratio)),
              ),
            )
        ],
      ),
    );
  }
}
